<style>
    .footer {
        position: relative;
        width: 100%;
        text-align: center;
        color: #999999;
        padding-top: 10px;
        padding-bottom: 5px;
        font-size: 15px;
    }

    .home {
        line-height: 1.0;
    }

    .page.home li:first-child {
        margin-top: 0;
    }

    .home ul {
        padding-left: 10px;
        padding-right: 10px;
    }

    .home li {
        margin: 15px 0;
        overflow: hidden;
        border-radius: 2px;
        cursor: pointer;
    }

    .home .weui-media-box__title {
        font-size: 18px;
    }

    .home .weui-flex {
        padding: 30px 15px;
        padding-top: 20px;
    }

    .weui-flex .weui-flex__item {
    }

  /*  .home .first li .weui-flex:last-child {
        background: linear-gradient(left, #FA5858,#F8A590);
        background: -webkit-linear-gradient(left, #FA5858,#F8A590);
        padding: 8px;
    }

    .home .second li .weui-flex:last-child {
        background: linear-gradient(left, #57A8FA,#90DBF8);
        background: -webkit-linear-gradient(left, #57A8FA,#90DBF8);
        padding: 8px;
    }*/
    /*.home .unUse li .weui-flex:last-child {
           background:#B0B4BA;
           padding: 8px;
       }*/
    .first small,
    .second small,
    .unUse small {
        font-size: 8px;
    }

    .tips {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottomBtn {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        z-index: 2000;
    }

    .weui-cells__title2 {
        padding-left: 5px;
        margin-bottom: .1em;
        background-color: #FFFBE6;
        color: #999;
        font-size: 14px;
    }

    .home .first li {
        border-radius: 10px;
        background: linear-gradient(left, #ff5f5f,#fcb39c);
        background: -webkit-linear-gradient(left, #ff5f5f,#fcb39c);
        color: #fff;
        font-weight: 100;
    }

    .home .second li {
        border-radius: 10px;
        background: linear-gradient(left, #5eafff,#9de7fc);
        background: -webkit-linear-gradient(left,#5eafff,#9de7fc);
        color: #fff;
        font-weight: 100;
    }

    .home .unUse li {
        border-radius: 10px;
        background: #b7bcc2;
        color: #fff;
        font-weight: 100;
    }

    .hasChoose {
        text-align: right;
        position: relative;
        top: -15px;
        right: 0;
    }

        .hasChoose img {
            width: 18px;
            padding-top: 5px;
            padding-right: 5px;
            z-index: 1100;
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .hasChoose .bg {
            width: 60px;
            height: 60px;
            background-color: #ff5555;
            position: absolute;
            top: -35px;
            right: -30px;
            z-index: 1100;
            transform: rotate(40deg);
        }
</style>

<div class="page navbar js_show" ng-controller="CouponCtrl">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-navbar" >
                <div class="weui-navbar__item" ng-repeat="item in tabs" ng-click="btnCurrTab_click(item)" ng-class="{'weui-bar__item_on':currTab == item}">
                    <span>{{item.Name}}</span>
                </div>
            </div>
            <div class="weui-tab__panel home">
                <div class="weui-panel weui-panel_access" ng-show="currTab.Value == 'Enable'">
                    <div class="page__hd" ng-if="couponsList.length == 0" style="text-align: center;">
                        <p class="m-t-lg" style="color: #808080;">暂无数据</p>
                    </div>
                    <ul class="second" ng-repeat="item in couponsList">
                        <li  ng-show="item.couponType == 'ObjectCoupon'">
                            <div class="weui-flex">
                                <div class="weui-flex__item">
                                    <p class="weui-media-box__title" ng-bind="item.couponName">￥10</p>
                                    <p style="font-size: 12px; margin-top: 8px"><span ng-bind="item.startTime"></span> 至 <span ng-bind="item.endTime"></span></p>
                                </div>
                                <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                                    <img src="img/wx/coupon/gift.png" style="width: 30%" />
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul class="first" ng-repeat="item in couponsList">
                        <li ng-show="item.couponType == 'CashCoupon'" >
                            <div class="weui-flex ">
                                <div class="weui-flex__item">
                                    <p class="weui-media-box__title" ng-bind="item.couponName">￥10</p>
                                    <p style="font-size: 12px; margin-top: 8px"><span ng-bind="item.startTime"></span> 至 <span ng-bind="item.endTime"></span></p>
                                </div>
                                <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                                    <img src="img/wx/coupon/cash.png" style="width: 30%" />
                                </div>
                            </div>
<!--                            <div class="weui-flex">
                                <small ng-bind="item.couponFullCut"></small>
                            </div>-->
                        </li>
                    </ul>

                </div>

                <div class="weui-panel weui-panel_access" style="margin-top: 0px" ng-show="currTab.Value == 'TimeOut'">
                    <ul class="unUse" ng-repeat="item in couponsList">
                        <li>
                            <div class="weui-flex">
                                <div class="weui-flex__item">
                                    <p class="weui-media-box__title"  ng-bind="item.couponName">￥10</p>
                                    <p style="font-size: 12px; margin-top: 8px"><span ng-bind="item.endTime"></span>已过期</p>
                                </div>
                                <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                                    <img src="img/wx/coupon/gift.png" style="width: 30%" />
                                </div>
                            </div>
                        </li>
                    </ul>

                    <div class="page__hd "  ng-if="couponsList.length == 0" style="text-align: center;">
                        <p class="m-t-lg" style="color: #808080;">暂无数据</p>
                    </div>
                </div>
                <div class="weui-panel weui-panel_access" style="margin-top: 0px" ng-show="currTab.Value == 'Used'">
                    <ul class="unUse" ng-repeat="item in couponsList">
                        <li>
                            <div class="weui-flex">
                                <div class="weui-flex__item">
                                    <p class="weui-media-box__title" ng-bind="item.couponName">￥10</p>
                                    <p style="font-size: 12px; margin-top: 8px"><span>已使用:</span><span ng-bind="item.endTime"></span></p>
                                </div>
                                <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                                    <img src="img/wx/coupon/gift.png" style="width: 30%" />
                                </div>
                            </div>
                        </li>
                    </ul>

                    <div class="page__hd text-center" ng-if="couponsList.length == 0" style="text-align: center;">
                        <p class="m-t-lg" style="color: #808080;">暂无数据</p>
                    </div>
                </div>
                <p class="footer" ng-show="canShowMore()" ng-click="showMore_click()" >点击加载更多</p>
                <p class="footer" ng-show="!canShowMore() && couponsList.length > 0">已经最底啦</p>
            </div>

        </div>

    </div>
</div>
